<template>
  <div class="swipes" v-if="hasSwipes">
    <van-swipe :indicator-color="indicatorColor">
      <van-swipe-item
        v-for="item in swipes"
        :key="item.id"
      >
        <cover-image class="cover" :src="item.pic" size="@480w_141h_1c" :webp="false"></cover-image>
      </van-swipe-item>
    </van-swipe>
  </div>
  <load-more ref="listRef" @refresh="onRefresh" @load="onLoad">
    <div class="list">
      <video-cover 
        class="list-item"
        v-for="item in pageList"
        :key="item.bvid"
        :play="item.play || item.stat.view"
        :danmaku="item.video_review || item.stat.danmaku"
        v-bind="item"
      ></video-cover>
    </div>
  </load-more>

</template>

<script>
import { Swipe as VanSwipe, SwipeItem as VanSwipeItem } from 'vant'
import LoadMore from '@/components/LoadMore'
import CoverImage from '@/components/CoverImage'
import VideoCover from '@/components/VideoCover'
import UseSwipes from './hooks/useSwipes'
import UseList from './hooks/useList'
export default {
  name: 'Index',
  components: {
    VanSwipe,
    VanSwipeItem,
    CoverImage,
    LoadMore,
    VideoCover
  },
  setup() {
    const { swipes, hasSwipes, indicatorColor } = UseSwipes()
    const { listRef, pageList, onLoad, onRefresh } = UseList()

    return {
      listRef,
      indicatorColor,
      swipes,
      hasSwipes,
      pageList,
      onLoad,
      onRefresh
    }
  }
}
</script>

<style lang="scss" scoped>
  .swipes {
    position: relative;
    padding: {
      left: 10px;
      right: 10px;
    }
    overflow: hidden;
    margin-top: 10px;
    box-sizing: border-box;
    border-radius: 2px;

    :deep .van-swipe__indicators{
      left: auto;
      right: 10px;
      transform: none;
    }
    :deep .van-swipe__indicator{
      opacity: 1;
      background-color: $color-white;
    }

    .cover{
      padding-bottom: 141 / 480 * 100%;      
    }
  }
  .list {
    display: flex;
    flex-wrap: wrap;
    &-item {
      width: 50%;
      padding: 8px 5px;
      box-sizing: border-box;
    }
  }
</style>